<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>剑桥英语</title>
    <link rel="stylesheet" href="css/init.css">
    <link rel="stylesheet" href="css/headerFooter.css">
    <link rel="stylesheet" href="css/userIndex.css">

    <link rel="stylesheet" href="css/video-js.min.css">
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" href="css/classDetail.css">
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
</head>
<body>
<header class="container clearfix">
    <div class="header">
        <img src="./img/logo.png" width="52px" height="59px" alt="">
        <div class="headerLine"></div>
        <img class="jqlogo" src="./img/logoName.png" width="150px" height="55px" alt="">
        <img class="right rightImg" width="110px" height="33px" src="./img/logoRight.png" alt="">
    </div>
</header>
<div class="headerBg"></div>
<div class="container clearfix ">
    <div class="bread clearfix">
        <a href="index.html">首页 > </a><a href="classDetail.html" class="active">在线课程</a>
        <div class="loginState">
            <span class="loginName">你好，aaa</span>
            <span class="loginAbout"><span id="restPwd"><a href="resetPwd.html" style="color: #F9B100">修改密码</a></span> | <span id="logout">退出</span></span>
        </div>
    </div>
    <div class="detailCon">
        <h2>剑桥领思备考课程</h2>
        <h3>第二课  标题标题标题标题标题标题标题标题标题标题</h3>
        <div class="classLabel"><span>课时：16：30</span><span>学习次数：6966</span></div>
        <div class="video">
            <video id="video" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto">
                <source src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-uni-app-doc/a876efc0-4f35-11eb-97b7-0dc4655d6e68.mp4" type="video/mp4">
                <!--<source src="./img/video.mp4" type="video/mp4">-->
                <source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm">
                <source src="http://vjs.zencdn.net/v/oceans.ogv" type="video/ogg">
                <p class="vjs-no-js"> To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a> </p>
            </video>
        </div>
        <div class="blockText">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;剑桥英语青少版扩展阅读系列丛书引进并改编自Success with Reading英文原版，配套合剑桥英语青少版的进阶式补充阅读教程，每本教程由
            近100篇阅读文章和精心选配的图片、实用的练习题组成。阅读材料全部取自原汁原味的英语文章，学生可以从中学习到地道的英语句法结构和表达
            写紧扣时代潮流，内容符合中学生的学习趣，有助于进一步了解世界万象，同时提高语言能力。
        </div>
    </div>
</div>
<div class="classSwiper">
    <div class="container clearfix">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><div class="blockImg" style="background-image: url('./img/classList.png')"></div>
                    <div class="blockCon clearfix">
                        <h2>第一课  标题标题标题标题标题标题标题标题标题标题</h2>
                        <div class="classLabel flex"><span>课时：16：30</span><span>学习次数：6966</span></div>
                        <a class="goDetail" href="">开始学习<i></i></a>
                    </div></div>
                <div class="swiper-slide">
                    <div class="blockImg" style="background-image: url('./img/bottomLeft.png')"></div>
                    <div class="blockCon clearfix">
                        <h2>第二课  标题标题标题标题标题标题标题标题标题标题</h2>
                        <div class="classLabel flex"><span>课时：16：30</span><span>学习次数：6966</span></div>
                        <a class="goDetail" href="">开始学习<i></i></a>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="blockImg" style="background-image: url('./img/classList.png')"></div>
                    <div class="blockCon clearfix">
                        <h2>第三课  标题标题标题标题标题标题标题标题标题标题</h2>
                        <div class="classLabel flex"><span>课时：16：30</span><span>学习次数：6966</span></div>
                        <a class="goDetail" href="">开始学习<i></i></a>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="blockImg" style="background-image: url('./img/classList.png')"></div>
                    <div class="blockCon clearfix">
                        <h2>第四课  标题标题标题标题标题标题标题标题标题标题</h2>
                        <div class="classLabel flex"><span>课时：16：30</span><span>学习次数：6966</span></div>
                        <a class="goDetail" href="">开始学习<i></i></a>
                    </div>
                </div>
            </div>

        </div>
        <div class="swiper-button-prev"></div><!--左箭头。如果放置在swiper-container外面，需要自定义样式。-->
        <div class="swiper-button-next"></div><!--右箭头。如果放置在swiper-container外面，需要自定义样式。-->
    </div>
</div>
<!--<div class="bottomBg1" style="margin-top: -30px"></div>-->
<div class="bottomBg2">
    <div class="container clearfix">
        <div class="bottomBlock bottomBlock1">
            <div class="bottomBlockTitle" style="margin-bottom: 25px">
                <span>我要咨询</span><span class="line"></span><span>Consulting</span>
            </div>
            <a class="bottomBlockName" href="question.html">考试常见问题FAQ</a>
            <a class="bottomBlockName" href="javascript:;">在线课程咨询</a>
            <a class="bottomBlockName" href="cooperation.html">商务合作</a>
        </div>
        <div class="bottomBlock bottomBlock2 test">
            <div class="bottomBlockTitle" style="margin-bottom: 35px">
                <span>报名考试</span><span class="line"></span><span>Candidate Registration</span>
            </div>
            <a class="bottomBlockName" href="userLogin.html">个人报名</a>
            <!--<a class="bottomBlockName" href="javascript:;">在线课程咨询</a>-->
            <a class="bottomBlockName" href="companyLogin.html">机构报名</a>
        </div>
    </div>
</div>
<!--页尾-->
<footer class="footer clearfix" style="margin-top: 0">
    <div class="container clearfix">
        <div class="footerTitle">剑桥领思中国运营中心</div>
        <div class='footerLeft'>
            <div>客服电话</div>
            <div class="line"><span ></span></div>
            <div class="info"><i class="footerIcon phone"></i>400-100-8565 </div>
            <div style="font-size: 12px">（周一至周日 08:00 – 20:00）</div>
        </div>
        <div class='footerCenter'>
            <div>客服邮箱</div>
            <div class="line"><span></span></div>
            <div class="info"><i class="footerIcon email"></i>service@piloteducation.cn</div>
        </div>
        <div class='footerRight right'>
            <img class="" src="./img/logoName.png" width="175px" height="64px" alt="">
        </div>
    </div>

</footer>
<div class="copyRight">
    京公网安备11011302000942号 <a href="https://beian.miit.gov.cn/" style="color:#fff">ICP备案许可证：京ICP备13031798号-1</a> Copyright 2005 - 2020 领航文化 All Rights Reserved
</div>


<!--退出登录-->
<div class="logoutModel">
    <div class="logoutCon">
        <div><img src="./img/logout.png" alt=""></div>
        <div>您将退出本次登录</div>
        <div><span class="cancel">取消</span><span class="yes">确定</span></div>
    </div>
</div>

<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/common.js"></script>
<script src="js/video.min.js"></script>
<script src="layui/layui.js"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script>
    $(document).ready(function(){
        var player = videojs('video', {
            controlBar: {
                volumePanel: {inline: false}
            },
            fluid:true,
            // aspectRatio:'16:9'
        })
        console.log(player.controlBar)
        var newbtn = document.createElement('btn');
        newbtn.innerHTML = '<div class="vjs-volume-panel vjs-control speedside"><button class="vjs-mute-control vjs-button vjs-vol-3 " type="button"><span id="speed-video">1X</span></button><div class="vjs-volume-control vjs-control vjs-volume-vertical video-bar" id="speedtab"></div></div>';
        var controlBar = document.getElementsByClassName('vjs-control-bar')[0];
        var insertBeforeNode = document.getElementsByClassName('vjs-fullscreen-control')[0];

        controlBar.insertBefore(newbtn, insertBeforeNode);

        //生成倍速选项、添加点击事件、增加选中样式
        for (let i = 0, j = 0.5; i < 4; i++) {
            var newchoose = document.createElement('span');
            var newtext = document.createTextNode(j + 'x');
            newchoose.appendChild(newtext);
            newchoose.className = 'speed';
            document.getElementById("speedtab").appendChild(newchoose);
            newchoose.onclick = function () {
                player.playbackRate(j - 0.5);
                document.getElementById('speed-video').innerHTML = j-0.5 + 'x';
                var arrs = document.getElementsByClassName('speed');
                for (let k = 0; k < arrs.length; k++) {
                    arrs[k].className = 'speed';
                }
                this.className = 'speed speedsidechoose';
            };
            j += 0.5;
        }

        //默认1x是选中样式
        document.getElementsByClassName('speed')[1].className = 'speed speedsidechoose';
        // player.removeChild('BigPlayButton');//开始的大按钮
        $(document.getElementById(video)).css("zoom", "1.25");
        $(document.getElementById(video)).css("width", "100%");

        if( $(document.getElementById(video)).width()>700){
            $(document.getElementById(video)).css("height", "414px");
        }
        else{
            $(document.getElementById(video)).css("height", "305.5px");
        }
        /*让控制面板在视频未开始之前常驻*/
        // setTimeout(function(){
        //     $(document.getElementById(video)).addClass("vjs-has-started");
        // },100);
        var mySwiper = new Swiper('.swiper-container', {
            slidesPerView: 2,
            slidesPerGroup : 2,
            spaceBetween: 20,
            loop:true,
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
        })
    });
</script>
</body>
</html>
